<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron Desktop</title>
<!--    <link rel="stylesheet" href="./css/all.min.css">-->
    <style>
      body {
        margin: 0;
      }
      .header {
        display: flex;
        align-items: center;
        height: 50px;
        -webkit-app-region: drag;
        justify-content: flex-end; /* 添加这行 */
        user-select: none;
        /*margin-right: 20px;*/
        background-color: black; /* 添加这行 */
      }
      .header-basic {
        width: 50px;
        height: 50px;
        line-height: 14px;
        margin-left: 5px;
        font-size: 12px;
        color: #2b2b2b;
        text-align: center;
        border-radius: 50%;
        -webkit-app-region: no-drag;
      }
      .header-close:hover {
        background-color: rgb(255, 0, 0);
      }
      .header-minimize:hover {
        background-color: rgb(255, 140, 0);
      }
      .header-maximize:hover {
        background-color: rgb(0, 255, 0);
      }
      @media (prefers-color-scheme: dark) {
        body {
          background: #333;
          color: white;
        }
      }
      @media (prefers-color-scheme: light) {
        body {
          background: #ddd;
          color: black;
        }
      }
      /*.flex-line {*/
      /*  display: flex;*/
      /*  margin-top: 12px;*/
      /*}*/
      /*.flex-line label {*/
      /*  line-height: 32px;*/
      /*  height: 32px;*/
      /*  color: #000;*/
      /*  margin-right: 8px;*/
      /*}*/
      /*.flex-line input,*/
      /*.flex-line textarea {*/
      /*  flex: 1;*/
      /*}*/
      /*#saveToLocal {*/
      /*  padding: 8px 0;*/
      /*  border: 1px solid #ccc;*/
      /*  width: 120px;*/
      /*  text-align: center;*/
      /*  margin-top: 12px;*/
      /*  border-radius: 4px;*/
      /*}*/

      /*#changeStyle {*/
      /*  padding: 8px 0;*/
      /*  border: 1px solid #ccc;*/
      /*  width: 120px;*/
      /*  text-align: center;*/
      /*  margin-top: 12px;*/
      /*  border-radius: 4px;*/
      /*}*/
    </style>
  </head>

  <body>
  <div class="header">
    <div id="zoomOut" class="header-basic header-minimize"><i class="fas fa-minus"></i></div>
    <div id="zoomIn" class="header-basic header-maximize"><i class="fas fa-plus"></i></div>
    <div id="close" class="header-basic header-close"><i class="fas fa-times"></i></div>
  </div>
    <!-- <p id="platform">操作系统：</p>
    <p id="release">版本号：</p>
    <p id="preloadInfo">fromPreload:</p> -->
    <div class="flex-line">
      <label for="path">保存路径</label>
      <input name="path" id="path" type="text" placeholder="请输入保存路径" />
    </div>
    <div class="flex-line">
      <label for="content">文本内容</label>
      <textarea
        name="content"
        id="content"
        cols="30"
        rows="4"
        placeholder="请输入文本内容"
      ></textarea>
    </div>
    <div id="saveToLocal">保存</div>
    <div id="changeStyle">风格切换111</div>
    <script src="./index.js"></script>
    <script>
      console.log("window.fromPreload = ", window.fromPreload); // undefined

    </script>
  </body>
</html>
